<template>
  <div>
    <div class="goods-info">
      <div class="goods-title">{{goods.desc}}</div>
      <div class="goods-price">
        <div class="goods-new-price">{{goods.newPrice}}</div>
        <div class="goods-old-price">{{goods.oldPrice}}</div>
        <div class="goods-discount">{{goods.discount}}</div>
      </div>
      <div class="goods-about">
        <div v-for="item in goods.columns" :key="item">{{item}}</div>
      </div> 
    </div> 
  </div>  
</template>

<script>
export default {
  name:"DetailGoodsInfo",
  props:{
    goods:{
      type: Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style scoped>
.goods-title{
  font-weight: 800;
  color: black;
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.goods-price{
  display: flex;
  margin-top: 10px;
}

.goods-new-price{
  font-size: 30px;
  color: #ff1a75;
}

.goods-old-price{
  margin-top: 11px;
  text-decoration:line-through
}

.goods-discount{
  background-color: #ff3385;
  color: white;
  border-radius: 45%;
  height: 25px;
  line-height: 25px;
  font-size: 10px;
}

.goods-about{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 30px;
  margin-bottom: 5px;
}

.goods-info{
  border-bottom: 1px solid #e0e0eb;
}

</style>